<template>
  <div class="login-wrap">
    <div class="content-wrap">
      <input
        class="login-item passport"
        type="text" v-model="userName"
        placeholder-style="color:#A3AAB7"
        placeholder="请输入易打单账号"
      >
      <input
        class="login-item password"
        placeholder-style="color:#A3AAB7"
        type="password" v-model="userPass"
        placeholder="请输入密码"
      >
      <div
        class="login-item sign-in"
        @click="signIn"
      >登录</div>
      <div
        class="login-item sign-up"
        @click="signUp"
      >注册</div>
    </div>
    <mytoast ref="mytoast" />
  </div>
</template>

<script>
/**
 * * login
 */
import api from "@/utils/api";
import mytoast from "@/components/toast";

export default {
  name: "login",
  components: {mytoast},
  mixins: [],
  props: {},
  data() {
    return {
        userName : "",
        userPass : ""
    };
  },
  computed: {},
  watch: {},
  beforeCreate() {},
  created() {},
  mounted() {},
  methods: {
    signIn() {
        var _this = this;
        wx.request({
            url: api.login,
            header: {
                "Content-Type": "application/x-www-form-urlencoded"
            },
            method: "POST",
            data: {
                username : _this.userName,
                password : _this.userPass,
                openId : wx.getStorageSync("openId")
            },
            success(res) {
                console.log(res);
                if(res.data.code != 200){
                    _this.$refs.mytoast.show(res.data.msg);
                    return ;
                }
                wx.setStorageSync("otherPath",api.path00);
                wx.setStorageSync("sessionId", res.data.data);
                var url = "../menu/main";
                mpvue.navigateTo({ url });
            },
            fail(res) {
                console.log(res);
                _this.$refs.mytoast.show("网络异常");
            },
            complete(){
            }
        });

    },
    signUp() {
      var url = "../signUp/main";
      mpvue.navigateTo({ url });
    }
  }
};
</script>
<style lang="wxss">
page {
  width: 100%;
  height: 100%;
  /* text-align: center; */
  background-color: #f7fbff;
}
</style>
<style  scoped>
.content-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  margin-top: 20%;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 500;
}
.content-wrap .login-item {
  box-sizing: border-box;
  display: block;
  width: 80%;
  height: 80rpx;
  line-height: 80rpx;
  margin: 20rpx auto;
  border-radius: 40rpx;
}
.content-wrap input {
  text-align: left;
  padding-left: 40rpx;
  background: white;
  box-shadow: 0px 1px 6px 0px rgba(0, 119, 255, 0.16);
}
.content-wrap div {
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(55, 62, 79, 1);
  text-align: center;
  vertical-align: middle;
  box-shadow: 0px 4px 6px 0px rgba(0, 119, 255, 0.1);
}
.content-wrap .sign-in {
  color: #fff;
  background: linear-gradient(
    -62deg,
    rgba(4, 171, 245, 1),
    rgba(7, 127, 255, 1)
  );
}
.sign-in:active,.sign-up:active{
  opacity: 0.5;
}
.sign-up {
  color: #333;
  border: 1px solid #077fff;
}
.phcolor {
  color: #a3aab7;
}
</style>
